<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品信息</title>
</head>
<style>
    .images {
        width: 500px;
        height: 500px;
        margin: 50px 0px 0px 100px;
        padding: 0;
    }

    .seller {
        border-radius: 25px 25px 25px 25px;
        height: 60px;
        width: 1255px;
        margin-left: 60px;
        margin-top: 5px;
        background-color: rgb(238,238,238);

    }
</style>
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script src="../../plugins/element-ui/index.js"></script>

<body>
<div id="app" >
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                 @select="handleSelect">
            <div style="display: inline-block;margin-left: 1300px;">
                <el-dropdown v-if="btnhead">
                  <span class="el-dropdown-link">
                      <el-avatar :size="40" :src="userInfo.headImage"  style="margin-top: 10px;"> </el-avatar>
                  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-user" @click.native="userCenter">我的信息</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-error" style="color: rgb(230, 73, 73);" @click.native="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button type="primary" style="margin-right: 20px;" v-if="btnlogin" @click="jumpLogin()" >登录 </el-button>
            </div>
        </el-menu>

    </div>
    <template>
        <div >
            <div style="margin: 10px 0">
                <el-button type="primary" style="margin-left: 5px" @click="goBack"><i class="el-icon-back"></i>返回 </el-button>
            </div>
        </div>
    </template>
    <div  class="seller">
        <el-avatar :size="40" :src="sellerInfo.headImage"  style="margin-top: 10px;margin-left: 20px;"> </el-avatar>
        <div style="margin-left: 80px;margin-top: -35px;">
            <span style="font-size: 20px;">{{sellerInfo.userName}}</span>
        </div>
        <div style="margin-left: 180px;margin-top: -22px;">
            <span style="font-size: 20px;">他的评分：</span>
        </div>
        <div style="margin-left: 280px;margin-top: -25px;color: red;">
            <span style="font-size: 20px;">{{sellerInfo.avgRate}}</span>
        </div>
        <div style="margin-left: 1090px;margin-top: -30px;">
            <el-button round icon="el-icon-search" @click="checkSeller()">查看他的宝贝 </el-button>
        </div>


    </div>

    <el-row>

        <el-col :span="8"><div style="margin-left: 90px;margin-top: 30px;">
            <el-carousel :interval="4000" style="height: 100%; width:380px;">
                <el-carousel-item v-for="item in images" :key="item"  >
                    <el-image :src="item" alt="图片不见了" style="height: 100%; width:100%;"></el-image>
                </el-carousel-item>
            </el-carousel>
        </div></el-col>
        <el-col :span="12">
            <div style="margin-top: 30px;margin-left: 30px;">
                <div  >
                    <span style="font-size: 18px;font-weight: bold;">{{formData.goodsName}}</span><br><br>


                    <el-row>
                        <el-col :span="2">
                            <span style="font-size: 15px;" v-if="selling">距结束</span>
                        </el-col>
                        <el-col :span="12">
                            <el-statistic :value="deadline4"  time-indices :format="format" v-if="selling" >
                            </el-statistic>
                        </el-col>

                        <span v-if="sold" style="color: red;font-weight: bold;">已结束</span>
                        <span v-if="sold" style="font-size: 18px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;结束时间&nbsp;&nbsp;&nbsp;&nbsp;{{formData.endTime}}</span>
                    </el-row>
                </div>

                <div style="background: rgb(233, 229, 229);">
                    <el-row>

                        <div style="margin-top: 40px;margin-left: 50px;">
                            <span>当前价</span>
                            <span style="font-size: 30px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;¥&nbsp;{{formData.maxAmount}}</span>
                            <span>&nbsp;&nbsp;&nbsp;({{formData.count}}人出价)</span>
                        </div>
                        <div style="margin-left: 50px;margin-top: 40px;">
                            <span>保证金</span>
                            <span style="font-size: 30px;color: rgb(178, 11, 11);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;¥&nbsp;{{formData.deposit}}</span>
                        </div>


                    </el-row>
                    <el-button type="primary" style="margin-top: 30px;margin-left: 100px;margin-bottom: 28px;" @click="depostiVisiable()">报名交保证金</el-button>
                    <el-button type="primary" style="margin-top: 30px;margin-left: 100px;margin-bottom: 28px;"@click="auctionFrom=true">参与出价</el-button>
                </div>

            </div>

        </el-col>
    </el-row>

    <div style="width: 1272px;margin-left: 59px;margin-top: 20px;">
        <el-descriptions class="margin-top"  :column="3" :size="small" border >
            <el-descriptions-item>
                <template slot="label">
                    需缴纳保证金金额
                </template>
                {{formData.deposit}}元
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    起拍价
                </template>
                {{formData.startingPrice}}元
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    加价幅度
                </template>
                {{formData.priceMarkup}}元
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    商品描述
                </template>
                {{formData.description}}
            </el-descriptions-item>
        </el-descriptions>
    </div>

    <div style="width: 1272px;margin-left: 59px;margin-top: 20px;">
        <img src="../../images/liucheng.png" style="width: 1272px; ">
    </div>
    <div style="margin-top:30px;margin-left: 60px;width:1255px ;">
        <span style="font-weight: bold;">出 价 记 录</span>
    </div>
    <div>
        <el-table :data="auctionFrom1" border stripe style="margin-top:30px;margin-left: 60px;width:1255px ;" >

            <el-table-column prop="userName" label="竞拍人" width="418" :show-overflow-tooltip='true'>
            </el-table-column>

            <el-table-column  prop="bidAmount" label="价格" width="418"></el-table-column>
            <el-table-column  prop="updateTime" label="时间" width="418"></el-table-column>



        </el-table>
    </div>

    <el-dialog title="保证金详细规则" :visible.sync="depositRule">
        <div>
            1. 保证金缴纳<br>
            &nbsp;&nbsp;&nbsp;&nbsp;买家在对卖拍品进行出价竞拍前，必须先缴纳保证金;<br>
            2. 保证金释放<br>
            &nbsp;&nbsp;&nbsp;&nbsp;1）拍品未竞拍成功（出局），待拍卖结束后，系统会在72小时内释放保证金； <br>
            &nbsp;&nbsp;&nbsp;&nbsp;2）竞拍成功后，关闭交易，系统会在72小时内释放保证金； <br>
            &nbsp;&nbsp;&nbsp;&nbsp;注：如您缴纳的拍卖保证金已符合释放条件，但是系统还没有给予释放，您可以联系拍卖客服15213410963，会尽快 &nbsp;&nbsp;&nbsp;&nbsp;帮您处理。<br>
            3. 保证金扣除<br>
            &nbsp;&nbsp;&nbsp;&nbsp;凡是竞拍成功的买家，在竞拍结束后的72小时内未付款，系统会自动关闭交易，并扣除保证金款； <br>
        </div>

        <div style="margin-top: 50px;margin-left: 200px;">
            <el-button type="primary" @Click="doDeposit()">确 认</el-button>


            <el-button style="margin-left: 100px; " @click="depositRule = false">取 消</el-button>
        </div>
        </el-form>
    </el-dialog>

    <el-dialog title="出价" :visible.sync="auctionFrom">
        <div style="margin-left: 200px;">
            <span>{{formData.maxAmount}} &nbsp;&nbsp;&nbsp;&nbsp; + &nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span>{{formData.priceMarkup}} &nbsp;&nbsp;&nbsp;&nbsp; * &nbsp;&nbsp;&nbsp;&nbsp;</span>
            <div style="width: 100px; display: inline-block;">
                <el-input  v-model="myAmount" oninput ="value=value.replace(/[^0-9]/g,'')" placeholder="倍数"></el-input>
            </div>
            <span> &nbsp;&nbsp;&nbsp;倍</span>

            </el-form>
        </div>

        <div style="margin-top: 50px;margin-left: 200px;">
            <el-button type="primary" @click="doAcution()" >确 认</el-button>
            <el-button style="margin-left: 100px; " @click="auctionFrom = false">取消</el-button>
        </div>
        </el-form>
    </el-dialog>
</div>


</body>

<script>
    new Vue({
        el: "#app",
        data(){

            return{
                auctionForm1:[
                    {
                        userName: "test1",
                        amount: "500",
                        updateTime: "2023-1-3 10:12:00"
                    }
                ],
                sellerInfo:{
                    headImage:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                    userName:"test1",
                    avgRate: "4"
                },
                userInfo:{
                    headImage: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                },
                btnlogin: true,
                btnhead: false,
                depositRule: false,
                selling: true,
                auctionFrom: false,
                format: "HH小时mm分钟ss秒",
                images: [

                    "https://img.alicdn.com/bao/uploaded/i3/O1CN01Rww2Im1UdMoUwjWNt_!!0-paimai.jpg_400x400.jpg",

                ],
                formData: {
                    "maxAmount": 60,
                    "goodsName": "98新万国柏涛菲诺月相自动手表女表IW459002玫瑰金镶钻",
                    "deposit": "50",
                    "description": "劳力士  无历黑水鬼 表径41mm 自动机械机芯 2022年11月全套全长 热门超公价款  店内现货",
                    "startingPrice": 500,
                    "startingTime": "2022/12/01 14:12",
                    "endTime": "2022-12-21 15:00:00",
                    "priceMarkup": 0,
                    "typeName": "表",
                    "userName": "LostSouls",
                    "phone": "15213324310",
                    "email": "2568938256@qq.com",
                    "breakCount": 0,
                    "count": 0,
                    "images": [
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                    ],
                    "buyerUserId": "",
                    "bidAmount": 0,

                },
                myAmount: "",

                deadline4: "" ,
                sold: false,
                activeIndex: '1',
            }


        },
        created(){
            var goodsId = sessionStorage.getItem("currentGoodsId");
            if(this.formData.priceMarkup == 0 ){
                this.formData.priceMarkup = 1
            }
            if(goodsId != null){
                this.getInfo(goodsId)
                this.getSellerInfo(goodsId)
                this.getAuction()
            }else {
                this.$message.error("商品信息不存在");
            }

            if(sessionStorage.getItem("userId") != null){
                this.btnhead = true;
                this.btnlogin = false;
                this.getHeadImage();
            }
        },

        methods: {
            getHeadImage(){
                axios.get("/user/getUserHeadImage/" + sessionStorage.getItem("userId")).then((res => {
                    this.userInfo.headImage = res.data.data;
                }))
            },
            checkSeller(){
                sessionStorage.setItem("sellerUserId",this.sellerInfo.userId)
                window.location.href ="./seller.html"
            },
            getInfo(goodsId){
                axios.get("/goodsInfo/sellDetail/" + goodsId).then((res) => {
                    this.formData = res.data.data;
                    if(this.formData.priceMarkup == 0 ){
                        this.formData.priceMarkup = 1
                    }
                    this.images = res.data.data.images;
                    var year = Number(this.formData.endTime.substring(0,4))
                    var month = Number(this.formData.endTime.substring(5,7))
                    var day = Number(this.formData.endTime.substring(8,10))
                    var hour = Number(this.formData.endTime.substring(11,13))
                    var min = Number(this.formData.endTime.substring(14,16))
                    var se = Number(this.formData.endTime.substring(17,19))

                    this.deadline4 =Date.now() +  (new Date(year,month-1,day,hour,min,se) - Date.now())
                    if(this.deadline4 < Date.now()){
                        this.selling =false;
                        this.sold = true;
                    }
                })
            },
            getSellerInfo(goodsId){
                axios.get("/user/getSeller/"+goodsId).then((res) =>{
                    this.sellerInfo = res.data.data;
                    console.log(this.sellerInfo.avgRate)
                    if(this.sellerInfo.avgRate == null){
                        this.sellerInfo.avgRate = "暂无评分"
                    }
                })
            },

            goBack() {
                history.back();

            },

            jumpLogin(){
                window.location.href ="./login.html";
            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.load();
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            logout(){
                axios.get("/user/logout").then((res) => {
                    sessionStorage.clear();
                    this.btnlogin = true;
                    this.btnhead = false;
                })
            },

            depostiVisiable(){
                if(sessionStorage.getItem("userId") == null){
                    this.$message.error("请先登录")
                }else{
                    this.depositRule = true;
                }
                //this.depositRule = true;
            },
            doAcution(){
                if(sessionStorage.getItem("userId") == null) {
                    this.$message.error("请先登录")
                }else {
                    if(this.myAmount == "" || this.myAmount <= 0){
                        this.$message.error("请填写大于0的倍数")
                    }else{
                        this.formData.bidAmount =  this.formData.maxAmount + this.formData.priceMarkup * this.myAmount
                        this.$confirm("确认出价"+this.formData.bidAmount + "元吗？","提示",{type:"info"}).then(()=>{
                            this.formData.buyerUserId = sessionStorage.getItem("userId");
                            axios.post("/auction/participate",this.formData).then((res) => {
                                if(res.data.code == 0){
                                    this.$message.error(res.data.msg)
                                }else {
                                    this.$message.success(res.data.data)
                                }
                                this.auctionFrom = false;
                                this.myAmount = ""
                                this.getAuction()
                                this.getInfo(sessionStorage.getItem("currentGoodsId"))
                            })
                        }).catch(()=>{
                            //this.$message.info("取消");
                        })
                    }

                }

            },
            userCenter(){
                window.open("./user_center.html")
            },
            getAuction(){
                axios.get("/auction/queryList/" + sessionStorage.getItem("currentGoodsId")).then((res) => {
                    this.auctionFrom1 = res.data.data;
                })
            },
            doDeposit(){
                this.$confirm("确认缴纳保证金？","提示",{type:"info"}).then(()=>{
                    this.formData.buyerUserId = sessionStorage.getItem("userId");
                    axios.post("/deposit/pay",this.formData).then((res) => {
                        if(res.data.code == 0){
                            this.$message.error(res.data.msg)
                        }else {
                            this.$message.success(res.data.data)
                        }
                        this.depositRule = false;
                    })
                }).catch(()=>{
                    //this.$message.info("取消");
                })
            },
        }

    })
</script>

</html>